$(function () {
  // 定义一个全局变量对象
  // 将来筛选和分页都也可以修改
  let query = {
    pagenum: 1, //是	int	页码值
    pagesize: 10, //是	int	每页显示多少条数据
    cate_id: "", //否	string	文章分类的 Id
    state: "", //否	string	文章的状态，可选值有：已发布、草稿
  };

  //需求1: 展示文章列表(获取文章列表数据)
  let layer = layui.layer;
  initArticleList();
  //封装成函数,后面的分页/筛选/删除都会用到
  function initArticleList() {
    axios({
      method: "GET",
      url: "/my/article/list",
      params: query,
    }).then((res) => {
      if (res.data.status != 0) {
        return layer.msg(res.data.message);
      }
      //   console.log(res.data);
      //成功后,渲染列表
      //定义一个空数组
      let arr = [];
      //循环取出所有的数据
      res.data.data.forEach((ele) => {
        arr.push(`
          <tr>
              <td>${ele.title}</td>
              <td>${ele.cate_name}</td>
              <td>${dataFormat(ele.pub_date)}</td>
              <td>${ele.state}</td>
              <td>
                <a href="/article/art_edit.html?id=${
                  ele.Id
                }"  class="layui-btn layui-btn-xs">
                  编辑
                </a>
                <button
                  data-id=${ele.Id}
                  class="btn-delete layui-btn layui-btn-xs layui-btn-danger"
                >
                  删除
                </button>
              </td>
            </tr>
          `);
      });

      //循环结束再赋值添加
      let str = arr.join("");
      $("tbody").empty().html(str);

      //赋值之后,做分页(从控制台查看到了total代表数量)
      pageRender(res.data.total);
    });
  }

  //需求2:初始化文章分类(直接去发布文章中复制)
  let form = layui.form;
  initArtCateList();
  function initArtCateList() {
    axios({
      method: "GET",
      url: "/my/article/cates",
    }).then((res) => {
      //   console.log(res);
      //判断
      if (res.data.status != 0) {
        return layer.msg(res.data.message);
      }
      //成功获取,渲染
      //   console.log(res.data);
      let arr = [`<option value="">请选择文章类别</option>`];
      res.data.data.forEach((ele) => {
        arr.push(`
      <option value="${ele.Id}">${ele.name}</option>
      `);
      });
      //给表单赋值,并且以字符串拼接
      let str = arr.join("");
      //   alert(str);

      $("[name=cate_id]").empty().html(str);
      //form表单同步渲染
      form.render();
    });
  }

  //需求3:筛选
  $("#formSearch").on("submit", function (e) {
    e.preventDefault();
    //改分类和状态俩个全局参数
    query.cate_id = $(`[name=cate_id]`).val();
    query.state = $(`[name=state]`).val();
    //重新调用文章列表初始化方法(不是文章分类列表)
    initArticleList();
  });

  //需求4:分页(官方粘贴复制+赋值)
  var laypage = layui.laypage;

  function pageRender(total) {
    //执行一个laypage实例
    laypage.render({
      elem: "pageBox", //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: query.pagesize, //每页条数的选项
      curr: query.pagenum, //当前页
      //配置定制化的分页
      layout: ["count", "limit", "refresh", "prev", "page", "next", "skip"],
      //每页的条数配置
      limits: [2, 3, 5, 10],
      jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        //console.log(obj.limit); //得到每页显示的条数

        //首次不执行
        if (!first) {
          //do something
          //修改参数
          query.pagenum = obj.curr;
          query.pagesize = obj.limit;
          //展示文章列表(获取文章列表数据),重新渲染
          initArticleList();
        }
      },
    });
  }

  //需求5:删除
  $("tbody").on("click", ".btn-delete", function () {
    //在弹出层外获取id,要是在弹出层里this就改变了
    let id = $(this).attr("data-id");
    //alert(id);
    //弹出层
    //eg1
    layer.confirm(
      "确认删除此文章吗?",
      { icon: 3, title: "提示" },
      function (index) {
        //do something
        axios({
          method: "GET",
          //:去掉  /保留
          url: "/my/article/delete/" + id,
        }).then((res) => {
          //   console.log(res.data);
          if (res.data.status != 0) {
            return layer.msg(res.data.message);
          }
          //成功提示
          layer.msg("恭喜您,删除文章成功!!");
          //如果当前页只剩下一跳数据,而且删除成功了,那么query.pagenum(页码值)自减1
          //   console.log($(".btn-delete").length);
          //当前页要大于等于2,没有第0页,第一页不能减少了
          if ($(".btn-delete").length == 1 && query.pagenum >= 2) {
            query.pagenum--;
          }
          //重新渲染页面
          initArticleList();
        });
      }
    );
    layer.close(index);
  });
});
